<template>
  <div  class="white-box" v-loading.fullscreen="loading">

    <div style="display: flex;align-items: center;margin-bottom: 20px">
      <el-avatar :size="50" :src="proxy.imgUrl + detail.avatar">
        <img :src="defaultAvatar"/>
      </el-avatar>
      <div style="margin-left: 10px;flex: 1">
        <div>
          <el-text type="info">昵称：</el-text>{{detail.nickName}}
          <el-text type="info" style="margin-left: 20px">手机号：</el-text>{{detail.phone}}
        </div>
        <div v-if="detail.balance" style="margin-top: 5px">
          <el-text type="info">积分：</el-text>{{detail.balance.points}}
          <el-text type="info" style="margin-left: 20px">总佣金：</el-text>{{detail.balance.dominate}}
        </div>
      </div>
      <el-button type="primary" @click="handleChangPassword(detail)"> 修改密码 </el-button>
      <el-button type="primary" @click="handleChangCommission(detail)"> 变更佣金 </el-button>
      <el-button type="primary" @click="handleChangPoints(detail)"> 变更积分 </el-button>
    </div>

    <el-tabs v-model="tabsActive" type="card" >
      <el-tab-pane label="基础信息" name="基础信息">
        <div style="padding: 20px">
        <el-form ref="formDataRef" :model="formData" :rules="formRules" label-width="120px" style="width: 550px">
          <el-form-item label="登录账号" prop="userName" required>
            <el-input v-model.trim="formData.userName" clearable placeholder="请输入登录账号" maxlength="20"/>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model.trim="formData.phone" maxlength="11" clearable placeholder="请输入手机号" oninput="value=value.replace(/[^\d]/g,'')" />
          </el-form-item>
          <el-form-item label="用户名" prop="nickName">
            <el-input v-model.trim="formData.nickName" clearable placeholder="请输入用户名" maxlength="20"/>
          </el-form-item>
          <el-form-item label="推荐码" prop="referralCode">
            <el-input v-model.trim="formData.referralCode" clearable placeholder="请输入推荐码" maxlength="20"/>
          </el-form-item>
          <el-form-item label="头像" prop="avatar">
            <File-upload ref="avatarRef" v-model="formData.avatar" :fileSize="50" :limit="1" modelValueType="String" :fileType="['png', 'jpg', 'jpeg']" listType="picture-card"></File-upload>
          </el-form-item>
          <el-form-item label="生日" prop="birth">
            <el-date-picker
                v-model="formData.birth"
                type="date"
                placeholder="请选择"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                clearable
            />
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model.trim="formData.email" clearable placeholder="请输入邮箱"/>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="formData.sex">
              <el-radio :value="0">男</el-radio>
              <el-radio :value="1">女</el-radio>
              <el-radio :value="2">未知</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="note">
            <el-input v-model.trim="formData.note" clearable placeholder="请输入备注"/>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :value="0">正常</el-radio>
              <el-radio :value="1">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <div class="flexs">
              <el-button type="primary" :loading="btnLoading" @click="submit">
                确认修改
              </el-button>
            </div>
          </el-form-item>
        </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="推荐人" name="推荐人">
        <div style="display: flex;align-items: center;padding: 20px" v-if="detail.referralMember">
          <el-avatar :size="50" :src="proxy.imgUrl + detail.referralMember.avatar">
            <img :src="defaultAvatar"/>
          </el-avatar>
          <div style="margin-left: 10px">
            <div style="display: flex;align-items: center;margin-bottom: 6px">
              <el-text type="info">昵称：</el-text>
              <span>{{detail.referralMember.nickName}}</span>
              <el-button @click="toClientDetail(detail.referralMember.sid)" link type="primary">查看</el-button>
            </div>
            <div>
              <el-text type="info">手机号：</el-text>
              <span>{{detail.referralMember.phone}}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="直推下级" name="直推下级">
        <lowers :user-sid="sid"></lowers>
      </el-tab-pane>
      <el-tab-pane label="佣金明细" name="佣金明细">
        <commissionList :user-sid="sid" ref="commissionListRef"></commissionList>
      </el-tab-pane>
      <el-tab-pane label="积分明细" name="积分明细">
        <pointsList :user-sid="sid" ref="pointsListRef"></pointsList>
      </el-tab-pane>
    </el-tabs>

    <changCommission :show="commission_dialogShow" :data="commission_dialogParams" @close="commission_closeDialog"></changCommission>
    <changPoints :show="points_dialogShow" :data="points_dialogParams" @close="points_closeDialog"></changPoints>
    <changPassword :show="cp_dialogShow" :data="cp_dialogParams" @close="cp_closeDialog"></changPassword>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount, watch, computed} from "vue"
import {useRoute, useRouter} from "vue-router"
import commissionList from "@/views/Commission/CommissionList.vue";
import pointsList from "@/views/Points/PointsList.vue";
import lowers from "./components/lowers.vue";
import changPassword from "./components/changPassword.vue";
import changPoints from "./components/changPoints.vue";
import changCommission from "./components/changCommission.vue";
import FileUpload from "@components/FileUpload.vue";

const router = useRouter()
const route = useRoute()
const sid = route.query.sid || ""
const tabsActive = ref('基础信息')
const { proxy } = getCurrentInstance()

const loading = ref(false)
const detail = reactive({})
const getDetail = async () =>{
  loading.value = true
  await proxy.$axios
      .get(`/users/${sid}`)
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          if(result){
            for (let key in result){
              detail[key] = result[key]
            }
            for (let key in formData){
              formData[key] = result[key]
            }
          }
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      }).catch((err) => {

      }).finally(()=>{
        loading.value = false
      })
}

const formData = reactive({
  avatar:'',
  referralCode:'',
  birth:'',
  email:'',
  nickName:'',
  note:'',
  phone:'',
  sex:2,
  status:0,
  userName:''
})
const formRules = reactive({
  nickName: [{
    required: true,
    message: "请输入登录账号",
    trigger: "blur"
  }],
  password: [{
    required: true,
    message: "请输入登录密码",
    trigger: "blur"
  }],
  phone: [{
    required: true,
    message: "请输入手机号",
    trigger: "blur"
  }],
})


const btnLoading = ref(false)
const submit = async () => {
  btnLoading.value = true
  let data = JSON.parse(JSON.stringify(formData));
  proxy.$axios.put(`/users/${sid}`,data)
      .then((res) => {
        btnLoading.value = false
        if (res.data.code == 200) {
          proxy.$message({message: "保存成功！", type: "success"})
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      })
      .catch((err) => {
        btnLoading.value = false
      })
}
onMounted(() => {
  getDetail()
})

//修改密码
const handleChangPassword = (row) => {
  cp_dialogParams.row = row;
  cp_dialogShow.value = true;
}
const cp_dialogShow = ref(false);
const cp_dialogParams = reactive({
  loading: false,
  row: {}
});
const cp_closeDialog = (isSubmit) => {
  cp_dialogShow.value = false
  if(isSubmit){
    getData();
  }
}
// 变更积分
const pointsListRef = ref(null)
const handleChangPoints = (row) => {
  points_dialogParams.row = row;
  points_dialogShow.value = true;
}
const points_dialogShow = ref(false);
const points_dialogParams = reactive({
  loading: false,
  row: {}
});
const points_closeDialog = (isSubmit) => {
  points_dialogShow.value = false
  if(isSubmit){
    pointsListRef.value.fleshData();
    getDetail()
  }
}
// 变动佣金
const commissionListRef = ref(null);
const handleChangCommission = (row) => {
  commission_dialogParams.row = row;
  commission_dialogShow.value = true;
}
const commission_dialogShow = ref(false);
const commission_dialogParams = reactive({
  loading: false,
  row: {}
});
const commission_closeDialog = (isSubmit) => {
  commission_dialogShow.value = false
  if(isSubmit){
    commissionListRef.value.fleshData();
    getDetail()
  }
}
// 变动佣金 end
const toClientDetail = (sid) => {
  router.push({
    path: "/Client/ClientDetail",
    query: {
      sid:sid
    }
  })
}
</script>


<style lang="less" scoped>
.editor-box {
  border: 1px solid #ccc;
  border-radius: 2px;
}

:deep(.el-date-editor) {
  width: 320px !important;

  .el-input__wrapper {
    width: 320px;
  }
}
</style>
